<template>
  <div class="basic-table-demo">
    <h2>组件示例</h2>
    <BasicTable :data="tableData" :columns="columns" :loading="loading" @row-click="handleRowClick" />
    <br>
    <TestBtn></TestBtn>
    <br>
    <testElNotification/>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 方式1：使用命名导入
import { BasicTable } from 'basic-table'
// 方式2：使用默认导入
// import BasicTable from 'basic-table'
import TestBtn from 'test-btn'
import testElNotification from 'test-el-notification'
import 'basic-table/style.css'

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: '张三',
    age: 25,
    address: '北京市朝阳区',
    date: '2024-02-10'
  },
  {
    id: 2,
    name: '李四',
    age: 30,
    address: '上海市浦东新区',
    date: '2024-02-10'
  },
  {
    id: 3,
    name: '王五',
    age: 28,
    address: '广州市天河区',
    date: '2024-02-10'
  }
])

// 表格列配置
const columns = ref([
  {
    prop: 'id',
    label: 'ID',
    width: 80
  },
  {
    prop: 'name',
    label: '姓名',
    width: 120
  },
  {
    prop: 'age',
    label: '年龄',
    width: 80
  },
  {
    prop: 'address',
    label: '地址'
  },
  {
    prop: 'date',
    label: '日期',
    width: 120
  }
])

// 加载状态
const loading = ref(false)

// 行点击事件处理
const handleRowClick = (row: any) => {
  console.log('点击行:', row)
}
</script>

<style lang="scss" scoped>
.basic-table-demo {
  padding: 20px;

  h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: var(--wmc-text-color);
  }
}
</style>